<template>
    <div class="group-item">
      <div class="group-item-chart" :id="'charts'+index"></div>
    </div>
</template>
<script>
export default {
  props: {
    index: {
      type: Number,
      default: 0
    },
    liudong: {
      type: Boolean,
      default: false
    },
    liuxiang: {
      type: Boolean,
      default: false
    },
	  endSize: {
		  type: Number,
		  default: 4
	  },
    option: {
      type: Object,
      default () {
        return {}
      }
    },
	  chartData: {
		  type: Array,
		  default () {
			  return []
		  }
	  },
  },
  methods: {
    // 获取需要生成图表的元素
    // 以下是一些常用的配置参数 都有写明详细的注释
    initChart () {
      let echarts = null
      let ids = 'charts' + String(this.index)
      echarts = this.$echarts.init(document.getElementById(ids))
      let option = this.option
      if (echarts) {
        echarts.setOption(option)
	    this.changeActiveChart(option,echarts)
      }
	  window.addEventListener('resize', function() {
        echarts.resize();
      });
    },
    initliudong(){
		var that = this;
      let echarts = null
      let ids = 'charts' + String(that.index)
      echarts = that.$echarts.init(document.getElementById(ids))
	    let option = that.option
      if (echarts) {
	      
        echarts.setOption(option)
      }
	    setInterval(()=> {
		    // 每次向后滚动一个，最后一个从头开始。
		    // console.log(option.dataZoom[0].endValue);
		    // console.log("---"+KSMC.length);
		    if (option.dataZoom[0].endValue == that.chartData.length) {
			    option.dataZoom[0].endValue = that.endSize;
			    option.dataZoom[0].startValue = 0;
		    } else {
			    option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
			    option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
		    }
		    echarts.setOption(option);
	  }, 1000);
      window.addEventListener('resize', function() {
        echarts.resize();
      });
    },
	  changeActiveChart(option,echarts){
		  let app = {
			  currentIndex: -1,
		  };
		 setInterval(function () {
			  let dataLen = option.series[0].data.length;
			  // 取消之前高亮的图形
			 echarts.dispatchAction({
				  type: "downplay",
				  seriesIndex: 0,
				  dataIndex: app.currentIndex,
			  });
			  app.currentIndex = (app.currentIndex + 1) % dataLen;
			  // 高亮当前图形
			 echarts.dispatchAction({
				  type: "highlight",
				  seriesIndex: 0,
				  dataIndex: app.currentIndex,
			  });
			  // 显示 tooltip
			 echarts.dispatchAction({
				  type: "showTip",
				  seriesIndex: 0,
				  dataIndex: app.currentIndex,
			  });
		  }, 1000);
	  }
  },

  // 然后在mounted里调用该方法就可以了
  mounted () {
    if(this.liudong){
      this.initliudong()
    }
    if(!this.liudong){
      this.initChart()
    }
  }
}
</script>
<style lang="scss" scoped>
.group-item{
  width: 100%;
  height: 100%;
  .group-item-chart{
    width:100%;
    height: 100%;
  }
}
</style>
